<div id="content">
    <div id="content-header">
        <div id="breadcrumb">
            <a href="#" class="tip-bottom" data-original-title="Go to Home"><i class="icon-home"></i> 首页</a>
            <a href="#" class="tip-bottom" data-original-title="">配置管理</a>
            <a href="#" class="current">守护权限管理</a>
        </div>

        <!--  <h1>Tables</h1> -->
    </div>
    <div class="container-fluid">
        <!--  <hr> -->
        <div class="row-fluid">
            <div class="span12">
                <div class="row-fluid">
                    <button id="btnadd" class="btn btn-success pull-right">添&nbsp;加</button>
                </div>
                <div class="widget-box">
                    <div class="widget-title"> <span class="icon"> <i class="icon-th"></i> </span>
                        <h5>守护权限列表</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <table id="dataList" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>名称</th>
                                <th>图片</th>
                                <th>描述</th>
                                <th>类型</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row-fluid">
                    <div id="pagination" class="pagination alternate pull-right">

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</div>

<div id="dialog-form" title="Create new user" style=" display: none;">
    <p class="validateTips"></p>

    <form id="submitform" action="#" method="get" class="form-horizontal">
        <div class="control-group">
            <label class="control-label">名称 :</label>
            <div class="controls">
                <input name="rightname" type="text" class="span11" placeholder="">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">图片:</label>
            <div class="controls">
                <input name="imgfile" type="file" id="imgfile" size="40"  />

            </div>
            <input type="hidden" name="imgUrl" id="imgUrl">
            <img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />
            <input type="button" name="imgsubmit" id="imgsubmit" value="上传">
        </div>


        <div class="control-group">
            <label class="control-label">描述 :</label>
            <div class="controls">
                <textarea name="description"></textarea>
                <span class="help-block"></span>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">类型 :</label>
            <div class="controls">
                <select name="gtype">
                    <option value="1">黄金守护</option>
                    <option value="2">白银守护</option>
                </select>
            </div>
        </div>
    </form>

</div>
<iframe id='imgIframe'name = 'imgIframe' style='display:none;'></iframe>
<script type="text/javascript">

$(function(){
    getDataList();
    $('#imgsubmit').click(function(){
        $('#submitform').attr('action', "/configmgr/uploadGuardImg");
        $('#submitform').attr('target', 'imgIframe');
        $('#submitform').attr('method', 'post');
        $('#submitform').attr('enctype', 'multipart/form-data');
        $('#submitform').submit();
    })
});

$(function(){
    laydate.skin('molv');

    laydate({
        elem: '#dateline'
    });

});

function uploadImgReturn(url){
    $('#showimg').attr('src', url);
    $('#imgUrl').val(url);
    $('#showimg').show();
}

/**
 * 初始化为空
 */
function Initialization(){

    var submitform=document.getElementById('submitform');
    $('#showimg').attr('src', '');
    submitform.rightname.value='';
    submitform.description.value='';
    submitform.imgUrl.value='';
    submitform.gtype.value = 1;
    //submitform.image.value='';
}

var btnadd=document.getElementById('btnadd');
utils.addEvent(btnadd,'click',addData);

function addData(){
    $( "#dialog-form" ).dialog({
        width: 600,
        title:'添加Guard权限',
        modal:true,
        closeOnEscape:true,
        resizable:false,
        open:function(res){
            Initialization();
        },
        buttons:{
            "添加":function(){

                var submitform=document.getElementById('submitform'),
                        data={};

                data.action="add"
                data.img=submitform.imgUrl.value;
                data.rightname= submitform.rightname.value;
                data.des= submitform.description.value;
                data.type = submitform.gtype.value;
                $.ajax({
                    type:"post",
                    url:"/configmgr/updateGuardRight",
                    data:data,
                    dataType:'json',
                    success:function(res){
                        if(res.code==0){
                            getDataList();
                            $("#dialog-form" ).dialog("close");
                        }else{
                            alert(res.info);
                        }
                    }
                });


            },
            "取消":function(){
                $(this).dialog("close");
            }

        }
    });
}

function getDataList(index){
    var data={};
    data.page=index||0;
    data.numPerPage=pagesize;
    $.ajax({
        type:"post",
        url:"/configmgr/getGuardRight",
        data:data,
        dataType:'json',
        success:function(res){

            var data=res.data;
            var table=document.getElementById("dataList");
            var tbody= table.getElementsByTagName('tbody')[0];

            dataTable.clearData(tbody);

            for(var i=0;i<data.list.length;i++){
                addRow(tbody,'',data.list[i]);
            }

            if(!index||index==0){
                initPagination(data.count);
            }

        }
    });
}

function initPagination(page) {
    $("#pagination").pagination(page, {
        callback: pageselectCallback,
        items_per_page:pagesize, // 每页只显示一条记录
        num_display_entries : 3,
        num_edge_entries : 1,
        prev_text : "上一页",
        next_text : "下一页",
    });
}

function pageselectCallback(page_index, jq){
    getDataList(page_index);
    return false;
}

function addRow(table,index,data){
    var row=table.insertRow();
    var cell=row.insertCell(0);
    var cell1=row.insertCell(1);
    var cell2=row.insertCell(2);
    var cell3=row.insertCell(3);
    var cell4=row.insertCell(4);
    var cell5=row.insertCell(5);
    cell.innerHTML=data.id;
    cell1.innerHTML=data.name;
    cell2.innerHTML=data.img ? '<img src="' + data.img + '">' : '';
    cell3.innerHTML=data.des;
    cell4.innerHTML=data.type==1?'黄金守护':'白银守护';
    //cell2.innerHTML=data.image;
//  cell2.innerHTML=new Date(data.createTime*1000).format("yyyy-MM-dd");

    var deit=document.createElement("a"),
            del=document.createElement("a");

    deit.innerHTML='编辑';
    deit.className="table-edit";
    deit.data=data.id;
    utils.addEvent(deit,'click',dataEdit);

    del.innerHTML='删除';
    del.data=data.id;
    utils.addEvent(del,'click',dataDelete);

    cell5.appendChild(deit);
    cell5.appendChild(del);

    return row;
}


function dataEdit(id){
    var btn=this;
    var url="/configmgr/updateGuardRight/"+btn.data;

    $( "#dialog-form" ).dialog({
        width: 600,
        title:'修改公告信息',
        modal:true,
        closeOnEscape:true,
        resizable:false,
        open:function(){
            var data={};
            data.action='';

            Initialization();

            $.ajax({
                type:"post",
                data:data,
                url:url,
                dataType:'json',
                success:function(res){
                    var data= res.data;
                    var submitform=document.getElementById('submitform');

                    submitform.imgUrl.value=data.img;
                    if(data.img){
                        $('#showimg').attr('src', data.img);
                        $('#showimg').show();
                    }

                    submitform.rightname.value= data.name;
                    submitform.description.value= data.des;
                    submitform.gtype.value= data.type;
                }
            });
        },
        buttons:{
            "修改":function(){

                var submitform=document.getElementById('submitform');

                data={};

                data.action="update";
                data.img=submitform.imgUrl.value;
                data.name= submitform.rightname.value;
                data.des= submitform.description.value;
                data.type= submitform.gtype.value;
                $.ajax({
                    type:"post",
                    data:data,
                    url:url,
                    dataType:'json',
                    success:function(res){
                        if(res.code==0){
                            getDataList();
                            $("#dialog-form" ).dialog("close");
                        }
                        else{
                            alert(res.info);
                        }
                    }
                });

            },
            "取消":function(){
                $(this).dialog("close");
            }

        }
    });

}

function dataDelete(){
    if(confirm("确定要删除该数据")){
        var btn=this;
        var url="/configmgr/updateGuardRight/"+btn.data,
                data={};
        data.action="del";
        $.ajax({
            type:"post",
            data:data,
            url:url,
            dataType:'json',
            success:function(res){
                if(res.code==0){
                    getDataList();
                }else{
                    alert(res.info);
                }
            }
        });
    }
}


</script>
